.refills-header {
  @include clearfix;
  background-color: $refills-hero-background;
  clear: both;
  margin-bottom: 1em;
  padding: 5em 0 8em;
  text-align: center;
  width: 100%;

  @include media($refills-medium-screen) {
    margin-bottom: 4em;
    padding: 6em 0 8em;
  }

  @include media($refills-large-screen) {
    border-bottom: 2px solid darken($refills-hero-background, 5%);
    margin-bottom: 4em;
    padding: 6em 0 8em;
  }

  .refills-logo {
    display: inline-block;
    margin: 0 auto 1.4em auto;

    svg {
      @include size(80px);
      background: $refills-body-background-color;
      border-radius: 50%;
      fill: $refills-logo-color;
      padding: 0.3em;

      @include media($refills-medium-screen) {
        @include size(120px);
        padding: 0.5em;
      }
    }
  }

  h2 {
    font-family: $refills-second-serif;
    font-size: 1.4em;
    font-weight: 100;
    line-height: 1.4em;
    margin: 0 auto 2em auto;
    max-width: 80%;
    text-align: center;

    @include media($refills-medium-screen) {
      font-size: 2em;
      margin-bottom: 1em;
      max-width: 80%;
    }

    @include media($refills-large-screen) {
      font-size: 3em;
      line-height: 1.3em;
      margin-bottom: 0.8em;
      max-width: 45%;
    }
  }

  h3 {
    font-size: 1.3em;
    font-weight: 200;
    margin-bottom: 1em;
    text-align: center;
  }

  a {
    color: $refills-anchor-color;
    text-decoration: none;

    &:focus,
    &:hover {
      color: lighten($refills-anchor-color, 10%);
    }
  }

  p {
    @include refills-inset;
    border-radius: 30px;
    color: darken(desaturate($refills-logo-color, 50%), 15%);
    display: inline-block;
    font-family: $refills-narrow-sans;
    font-size: 0.8em;
    font-weight: 400;
    margin-bottom: 2em;
    padding: 0.5em 1.4em;

    @include media($refills-large-screen) {
      font-size: 0.8em;
    }
  }

  .empties-banner {
    $empties-color: #776faa;
    background-color: $empties-color;
    border: 1px solid darken(transparentize($empties-color, 0.1), 10%);
    border-radius: 5px;
    box-shadow: 0 2px 0 darken(transparentize($empties-color, 0.7), 10%);
    color: lighten(#c8c0ff, 8);
    display: inline-block;
    font-family: $refills-narrow-sans;
    margin-bottom: 2em;
    padding: 1em 2em;

    &:hover,
    &:focus {
      background-color: lighten($empties-color, 1%);
      color: lighten(#c8c0ff, 10);
    }
  }
}
